{% extends base %}

{% block head %}
<script src="/static/lib/codemirror/codemirror.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/lib/codemirror/codemirror.min.css">
<link rel="stylesheet" type="text/css" href="/static/lib/codemirror/theme/monokai.min.css">
<script type="text/javascript" src="/static/lib/codemirror/mode/sql.min.js"></script>
<style>
.CodeMirror {
    width: 100%;
    font-size:16px;
    height: 80px;
    border: 1px solid #ccc;
}
</style>
{% end %}

{% block body %}
{% init error     = "" %}
{% init cost_time = None %}
<div class="col-md-12 grid-card">
    {% set title      = T("SQL") %}
    {% include "tools/base_title.html" %}

    {% if error != "" %}
    <pre class="col-md-12 error">
    {{error}}
    </pre>
    {% end %}


    <form>
        <p>Path
            <select name="path" value="{{path}}">
                {% for p in path_list %}
                    <option value="{{p}}">{{p}}</option>
                {% end %}
            </select>
        </p>
        <textarea id="editor" name="sql" style="width:100%;">{{sql}}</textarea>
        <button>Run</button>
    </form>
</div>

<div class="grid-card">

    {% if cost_time is not None %}
    <div class="col-md-12">
    耗时: {{cost_time}} ms
    </div>
    {% end %}

    <div class="row">
    {% if len(keys) > 0 %}

        <table class="table">
            <tr>
                {% for key in keys %}
                <th>{{key}}</th>
                {% end %} <!-- for end -->
            </tr>

            {% for record in result_list %}
                <tr>
                {% for val in record.values() %}
                    <td>{{val}}</td>
                {% end %}
                </tr>
            {% end %}
        </table>

    {% end %} <!-- if end -->

    </div>

</div>

<script type="text/javascript">
$(function () {
    var editor = $("#editor")[0];
    var codeMirror = CodeMirror.fromTextArea(editor, {
        lineNumbers:true,
        mode: "text/x-sql"
    });
})
</script>

{% end %}